
<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2024-06-30 20:10:24
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2025-02-21 20:04:41
 * @FilePath: \greencity-ui\src\views\ldzb\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <center-map :paramObj="queryParams" ref="mapcontainerPanel"></center-map>
      <el-form ref="form" :model="queryParams" label-width="100px" size="small" :inline="true" v-show="true"
        class="queryPanel">
        <div class="transparent-ldzb-xzqhfanwei">
          <el-select v-model="queryParams.xzqfanwei" placeholder="请选择范围" style="width: 11.5vw" clearable
            @change="handleChangexzqhfanwei">
            <el-option v-for="dict in dict.type.sys_xzqfanwei" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </div>
        <div class="transparent-ldzb-xzqh">
          <el-select v-model="queryParams.xzqh" placeholder="请选择行政区" style="width: 11.5vw" clearable
            @change="handleChangexzqh" :disabled=switchhandleChangexzqh>
            <el-option v-for="dict in dict.type.sys_xzqh_xzq" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </div>
      </el-form>

    <div class="ldzbleftbox">
      <div class="ldzbleftop" style="height: 68%;">
        <div class="toptitle">
          <span>生态宜居性指标</span>
        </div>
        <ldzblefttopPanel ref="ldzblefttopPanel" :paramObj="queryParams" />
      </div>
      <div class="ldzblefbottom" style="height: 32%;">
        <div class="toptitle">
          <span >健康舒适指标</span>
        </div>
        <ldzbleftbottomPanel ref="ldzbleftbottomPanel" :paramObj="queryParams" />
      </div>
    </div>
    <div class="ldzbrightbox">
      <div class="ldzbrighttop" style="height: 45%;">
        <div class="toptitle">
          <span>安全韧性指标</span>
        </div>
        <ldzbrighttopPanel ref="ldzbrighttopPanel" :paramObj="queryParams" />
      </div>
      <div class="ldzbrightmid" style="height: 45%;">
        <div class="toptitle">
          <span>风貌特色指标</span>
        </div>
        <ldzbrightmidPanel ref="ldzbrightmidPanel" :paramObj="queryParams" />
      </div>
      <div class="ldzbrightbottom" style="height: 10%;">
        <ldzbrightbottomPanel ref="ldzbrightbottomPanel" :paramObj="queryParams" />
      </div>
    </div>
  </div>

</template>
<script>
  import mapContainer from "../../components/Map/mapContainer";
  import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

  import centerMap from "./centerMap";
  import { arcgisToGeoJSON } from "@terraformer/arcgis";
  import { geojsonToWKT } from "@terraformer/wkt";

  import ldzblefttopPanel from "./lefttopPanel.vue";
  import ldzbleftbottomPanel from "./leftbottomPanel.vue";
  import ldzbrighttopPanel from "./righttopPanel.vue";
  import ldzbrightmidPanel from "./rightmidPanel.vue";
  import ldzbrightbottomPanel from "./rightbottomPanel.vue";
// import watermark from "watermark-dom";

  export default {
    components: {
      mapContainer,
      centerMap,
      ldzblefttopPanel,
      ldzbleftbottomPanel,
      ldzbrighttopPanel,
      ldzbrightmidPanel,
      ldzbrightbottomPanel,
    },
    data() {
      return {
        isMapLoaded: false,
        paramObj:{},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          // xzqh:undefined,
          xzqfanwei:"城镇开发边界内",
          ldstylewidth:undefined,
        },
        switchhandleChangexzqh:false,
      }
    },
    dicts: [
      "sys_xzqh_xzq",
      "sys_xzqfanwei"
    ],
  created() {
    if(window.mapConfig.xzqhname!='乌鲁木齐市'){
      this.switchhandleChangexzqh=true;
      this.queryParams.xzqh= window.mapConfig.xzqhname;
      console.log(this.queryParams.xzqh);

    }
  },
    methods: {
      // 行政范围选择事件
      handleChangexzqhfanwei() {
        let _self = this
        console.log(_self.queryParams.xzqfanwei);
        // 使用 $nextTick() 解决Vue父组件修改了通过 props传递给子组件的数据，子组件没有及时更新问题https://code84.com/86880.html
        this.$nextTick(() => {
          if(!_self.queryParams.xzqfanwei){
            _self.queryParams.xzqfanwei="城镇开发边界内"
          };
          _self.$refs.ldzblefttopPanel.getData(_self.queryParams);
          _self.$refs.ldzbleftbottomPanel.getData(_self.queryParams);
          _self.$refs.ldzbrighttopPanel.getData(_self.queryParams);
          _self.$refs.ldzbrightmidPanel.getData(_self.queryParams);
        });
        // _self.getrefdata()
      },
      // 行政区划选择事件
      handleChangexzqh() {
        let _self = this
        console.log(_self.queryParams.xzqh);
        _self.$forceUpdate(); // 强制组件更新，使输入框显示选择的值。
        // 使用 $nextTick() 解决Vue父组件修改了通过 props传递给子组件的数据，子组件没有及时更新问题https://code84.com/86880.html
        this.$nextTick(() => {
          _self.$refs.ldzblefttopPanel.getData(_self.queryParams);
          _self.$refs.ldzbleftbottomPanel.getData(_self.queryParams);
          _self.$refs.ldzbrighttopPanel.getData(_self.queryParams);
          _self.$refs.ldzbrightmidPanel.getData(_self.queryParams);
          _self.$refs.mapcontainerPanel.refreshMap(_self.queryParams);

        });
      },

    },
  }
</script>
<style>
  .map-container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: calc(100vh - 60px);
    position: relative;
    z-index: 1;
  }

  .transparent-ldzb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 300px;
    position: absolute;
    top: 60%;
    left: 50%;
    /* margin-left: -37px; */
    transform: translateX(-50%);
    z-index: 3;
    /* background-color: rgba(12, 114, 107, 0.8); */
    /* 半透明的白色背景 */
    /* border: 1px solid #000; */
    /* 边框为黑色 */
  }
  .transparent-ldzb-xzqhfanwei,.transparent-ldzb-xzqh {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* top: 1.6%; */
    left: 26%;
    z-index: 1;
  }
  .transparent-ldzb-xzqhfanwei{
    top: 10px;
  }
  .transparent-ldzb-xzqh{
    /* left: 13%; */
    /* top: 10px; */
    top: 60px;
  }
  ::v-deep .transparent-ldzb-xzqhfanwei.el-select.el-input__inner {
    background-color:green
  }
.ldzbrightbox,.ldzbleftbox{
  width: 25%;
  height: 98%;
  /* display: flex; */
  justify-content: left;
  align-items: left;
  position: absolute;
  top: 10px;
  bottom: 10px;
  z-index: 3;
  border-radius: 25px;
  border: 5px solid rgba(19,172,134,0.8);
  animation: boxAnimation 6s infinite;

  .toptitle{
    top: 20px;
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
    color:#fff;
    font-size: 25px;
    font-family: "微软雅黑";
    display        : table;
    background     : url(../../../src/assets/images/ldfl/title.png) no-repeat center;
    background-size: 80%;
    span {
        display       : table-cell;
        vertical-align: middle;
            }
  };
}
@keyframes boxAnimation {
  0% {
    border-color: rgba(0, 255, 0, 0.8);
  }
  50% {
    border-color: rgba(19,172,134,0.8);
  }
  100% {
    border-color: #21706A;
  }
}
.ldzbleftbox{
  left: 0%;
  background-image:linear-gradient(to left,rgba(19,172,134,0.7), #21706A);
  .toptitle{
    margin-left:10px;
    margin-right:10px;
  }
}
.ldzbrightbox{
  right: 0%;
  background-image:linear-gradient(to right,rgba(19,172,134,0.7), #21706A);
  .toptitle{
    margin-left : 6px;
    margin-right: 6px;
  }
}
.toptitle{
  background:url(../../../src/assets/images/ldfl/title.png);
}
.transparent-ldzb-xzqhfanwei .el-input {
  background-color: #21706A; /* 你想要的背景色 */
  border-color: #21706A; /* 可以调整边框颜色 */
}
</style>
